<template>
  <div class="page-main">
    <div ref="searchDiv" class="page-main-search" :class="{'expand-search':hasExpand}" v-if="hasSearchComp">
      <div ref="searchForm">
        <slot name="search"></slot>
      </div>
    </div>

    <el-divider v-if="hasDropdown" class="page-search-divider">
      <el-button size="mini" type="text" @click="changeExpand">更多条件</el-button>
    </el-divider>

    <div ref="btnsEl" class="page-main-btns" v-if="hasBtns">
      <el-button v-if="hasSearchComp" type="primary" size="medium" @click="searchData">{{searchText}}</el-button>
      <slot name="append"></slot>
    </div>

    <div ref="statEl" class="page-main-stat" v-if="hasStat">
      <slot name="statistic"></slot>
    </div>

    <div class="page-main-table-div" :style="{height:tableHeight}">
      <slot name="table"></slot>
    </div>

    <table-pagination v-if="hasPagination" :pagination="pagination" @change="pageChange"></table-pagination>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex';
  import TablePagination from 'commonComponents/tablePagination';

  export default {
    props: {
      searchText: {
        type: String,
        default: '搜索'
      },

      hasTableHeight: {
        type: Boolean,
        default: true
      },

      pagination: {
        type: Object,
        default () {
          return null;
        }
      }
    },

    computed: {
      hasSearchComp() {
        return this.$slots.search;
      },

      hasBtns() {
        return this.$slots.append || this.hasSearchComp;
      },

      hasStat() {
        return this.$slots.statistic;
      },

      hasPagination() {
        let pagination = this.pagination;
        return pagination !== null && pagination.totalCount > 0;
      },

      heightChange() {
        return [this.hasSearchComp, this.hasDropdown, this.hasBtns, this.hasStat, this.hasPagination, this.clientHeight].join('_');
      },
      ...mapGetters(['clientHeight'])
    },

    watch: {
      hasSearchComp() {
        this.$nextTick(() => {
          this.setExpandEvent();
        });
      },

      heightChange() {
        if (this.hasTableHeight) {
          this.resetTableHeight();
        }
      }
    },

    data() {
      return {
        hasDropdown: undefined,
        hasExpand: false,
        tableHeight: 'auto'
      };
    },

    mounted() {
      this.$nextTick(() => {
        this.setExpandEvent();
      });
    },

    methods: {
      setExpandEvent() {
        let searchFormDom = this.$refs['searchForm'];
        if (searchFormDom === undefined) {
          this.hasExpand = false;
          return;
        }
        this.erd.removeAllListeners(searchFormDom, this.resetHasDropdown);
        this.erd.listenTo(searchFormDom, this.resetHasDropdown);
      },

      resetHasDropdown(el) {
        let searchHeight = $(el).height();
        let hasDropdown = searchHeight > 46;
        if (!hasDropdown) {
          this.hasExpand = false;
        }
        this.hasDropdown = hasDropdown;
      },

      changeExpand() {
        this.hasExpand = !this.hasExpand;
      },

      resetTableHeight() {
        let totalHeight = $(this.$el).height();
        let height = 0;
        if (this.hasSearchComp) {
          height += 46;
        }

        if (this.hasDropdown) {
          height += 26;
        }

        if (this.hasBtns) {
          let btnsHeight = $(this.$refs['btnsEl']).height();
          height += btnsHeight + 10;
        }

        if (this.hasStat) {
          let statHeight = $(this.$refs['statEl']).height();
          height += statHeight + 10;
        }

        if (this.hasPagination) {
          height += 37;
        }

        let tableHeight = totalHeight - height;
        tableHeight = Math.floor(tableHeight);
        this.tableHeight = tableHeight + 'px';
      },

      searchData() {
        this.$emit('search-data');
      },

      pageChange() {
        this.$emit('page-change', this.pagination);
      }
    },

    components: {
      TablePagination
    }
  };

</script>

<style lang="scss" scoped>
  .page-main {
    padding: 10px 10px 5px;
    position: relative;
    height: calc(100% - 15px);
    background: #f1f3f4;
    overflow: auto;

    .page-main-search {
      height: 46px;
      overflow: hidden;
      transition: all 2s;
      -moz-transition: all 2s;
      -webkit-transition: all 2s;
      -o-transition: all 2s;

      &.expand-search {
        height: auto;
      }
    }

    .page-search-divider {
      margin: 10px 0;
      margin-bottom: 15px;

      .el-divider__text {
        background: #f1f3f4;
      }
    }

    .page-main-btns {
      margin-bottom: 10px;
    }
  }

  .search-expand-enter-active,
  .search-expand-leave-active {
    transition: height 5s;
  }

</style>
